import './home-section.scss'
import React from 'react'
import { NavLink } from 'react-router-dom'

export default class HomeSection extends React.Component {
    state = {
        GoodsList: []
    }
    componentDidMount() {
        this.$axios.get('https://apipc-xiaotuxian-front.itheima.net/home/goods').then((res) => {
            if (res.data.msg == '操作成功') {
                this.setState({
                    GoodsList: res.data.result
                })
            }
        })
    }
    render() {
        return (
            <div id="home-section">
                {this.state.GoodsList.map((item, index) => {
                    return (
                        <div className="home_section" key={item.id}>
                            <div className="container">
                                <div className="head">
                                    <h3>{item.name}</h3>
                                    <div className="sub">
                                        {item.children.map((i, index) => {
                                            return <a href="" key={index}> {i.name}</a>
                                        })}
                                    </div>
                                    <a href="">查看全部&gt;</a>
                                </div>
                                <div className="content">
                                    <div className="left">
                                        <img src={item.picture} alt="" />
                                        <section>
                                            <span>{item.name}馆</span>
                                            <span>{item.saleInfo}</span>
                                        </section>
                                    </div>
                                    <div className="right">
                                        <ul>
                                            {item.goods.map((i, index) => {
                                                return (
                                                    <li key={i.id}>
                                                        <div className="goods_item">
                                                            <img src={i.picture} alt="" />
                                                            <p>{i.name}</p>
                                                            <p>{i.desc}</p>
                                                            <p>￥{i.price}</p>
                                                        </div>
                                                        <div className={`more`} >
                                                            <span>找相似</span>
                                                            <span>发现更多宝贝</span>
                                                        </div>
                                                    </li>
                                                )
                                            })}

                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    )
                })}

            </div>
        )
    }
}